<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>账目列表</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
    <style>
        th {
            text-align: center;
        }

        td {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <h1>账目</h1>
    <form class="form-inline">
        <div class="form-group">
            <!--<label class="sr-only" for="year">年份</label>-->
            <label for="year"></label><select name="year" id="year" style="width: 105px" class="form-control">
                <option th:each="y : ${years}" th:value="${y.value}" th:text="${y.name}" th:selected="${y.value==year}"></option>
            </select>
        </div>
        <div class="form-group">
            <label for="month"></label>
            <select name="month" id="month" class="form-control" style="width: 105px;">
                <option th:each="m : ${months}" th:value="${m.value}" th:text="${m.key}" th:selected="${m.value==month+''}"></option>
            </select>
        </div>
        <div class="form-group">
            <input type="text" th:value="${purpose}" name="purpose" class="form-control" placeholder="用途">
        </div>

        <button type="submit" class="btn btn-primary">查询</button>
    </form>

    <br>
    <table class="table table-bordered table-hover">
        <tbody>
        <tr th:if="${billPage.totalElements ==0}" th:text="暂无数据" class="danger center-block"></tr>
        <tr th:unless="${billPage.totalElements ==0}" class="success">
            <th>#</th>
            <th>金额</th>
            <th>用途</th>
            <th>分类</th>
            <th>记账时间</th>
            <th>记账人</th>
        </tr>

        <tr th:each="bill,iter : ${billPage.content}">
            <td th:text="${iter.index+1}"></td>
            <td th:text="${bill.amount}"></td>
            <td th:text="${bill.purpose}"></td>
            <td th:text="${bill.category}"></td>
            <td th:text="${bill.happenedTime}"></td>
            <td th:text="${bill.createdBy}"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>
</html>